import {defineStore} from "pinia";
import originSetting from "@/config.json";
import {addOpacityToColor, setBodyPrimaryColor} from "@/utils/format";
import type {GlobalThemeOverrides} from "naive-ui";

export default defineStore("app", () => {
    const theme = ref(localStorage.getItem("theme") || originSetting.darkMode || "auto");
    // 设备
    const device = ref("");
    const isDeskTop = computed(()=>device.value === "desktop")
    const config = reactive({
        weakness: false,
        grey: false,
        primaryColor: "#79B6E7",
        showTabs: true,
        darkMode: "light",
        layout_side_width: 256,
        layout_side_collapsed_width: 80,
        layout_side_item_height: 48,
        show_watermark: false,
        side_mode: "vertical"
    });


    const themeOverrides: GlobalThemeOverrides = reactive({
        common: {
            primaryColor: "#3b82f6",
            primaryColorHover: addOpacityToColor("#3b82f6", 0.4),
            primaryColorPressed: addOpacityToColor("#3b82f6", 0.4),
        },
        Button: {},
        Menu: {
            itemColorHoverInverted: "#3b82f6",
            itemTextColorHover: "#3b82f6",
        },
        Select: {}
        // ...
    })

    // 初始化配置
    // Object.keys(originSetting).forEach((key) => {
    //     config[key] = originSetting[key];
    //     if (key === "primaryColor") {
    //         console.log(themeOverrides)
    //         setBodyPrimaryColor(originSetting[key], config.darkMode,themeOverrides);
    //     }
    // });

    if (localStorage.getItem("darkMode")) {
        config.darkMode = localStorage.getItem("darkMode");
    }

    watchEffect(() => {
        config.darkMode = theme.value
        if (theme.value === "dark") {
            document.documentElement.classList.add("dark");
            document.documentElement.classList.remove("light");
            localStorage.setItem("theme", "dark");
        } else {
            document.documentElement.classList.add("light");
            document.documentElement.classList.remove("dark");
            localStorage.setItem("theme", "light");

        }
    });
    // 切换色盲模式
    const toggleWeakness = (e: boolean) => {
        config.weakness = e;
        if (e) {
            document.documentElement.classList.add("html-weakenss");
        } else {
            document.documentElement.classList.remove("html-weakenss");
        }
    };
    // 切换灰度
    const toggleGrey = (e: boolean) => {
        config.grey = e;
        if (e) {
            document.documentElement.classList.add("html-grey");
        } else {
            document.documentElement.classList.remove("html-grey");
        }
    };

    const togglePrimaryColor = (e: string) => {
        config.primaryColor = e;
        setBodyPrimaryColor(e, config.darkMode, themeOverrides);
    };

    const toggleTabs = (e: string) => {
        config.showTabs = e;
    };

    const toggleDevice = (e: string) => {
        device.value = e;
    };

    const toggleDarkMode = (e: string) => {
        config.darkMode = e;
        localStorage.setItem("darkMode", e);
        if (e === "dark") {
            toggleTheme(true);
        } else {
            toggleTheme(false);
        }
    };
    const toggleTheme = (dark: boolean) => {
        if (dark) {
            theme.value = "dark";
        } else {
            theme.value = "light";
        }
    };

    const toggleDarkModeAuto = () => {
        // 处理浏览器主题
        const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
        const dark = darkQuery.matches;
        toggleTheme(dark);
        darkQuery.addEventListener("change", (e) => {
            toggleTheme(e.matches);
        });
    };


    const toggleConfigWatermark = (e: boolean) => {
        config.show_watermark = e;
    };

    const toggleSideModel = (e: "vertical" | "horizontal") => {
        config.side_mode = e;
    };

    if (config.darkMode === "auto") {
        toggleDarkModeAuto();
    }

    toggleGrey(config.grey);

    return {
        theme,
        device,
        config,
        toggleTheme,
        isDeskTop,
        toggleDevice,
        toggleWeakness,
        toggleGrey,
        togglePrimaryColor,
        toggleTabs,
        toggleDarkMode,
        toggleConfigWatermark,
        toggleSideModel,
        themeOverrides,

    };
});
